<template>
  <div class="app-container" v-loading="loading">
    <div class="info_box">
      <div class="info_title">基本信息</div>
      <div class="detail_box">
        <div v-for="item in info" :key="item.name">
          <el-tag type="info">{{ item.name }}</el-tag>
          <el-tag>{{ item.value }}</el-tag>
        </div>
      </div>
    </div>

    <div class="chart_box">
      <div class="key_chart_box">
        <span>命令统计</span>
        <dv-capsule-chart :config="config" class="key_chart"/>
      </div>
      <div class="key_chart_box">
        <span>内存占用</span>
        <dv-percent-pond :config="memoryConfig" class="memory_chart"/>
      </div>
    </div>


  </div>
</template>
<script>
import {list} from "@/api/monitor/redis";

export default {
  data() {
    return {
      info: [],
      key: [],
      config: {},
      memoryConfig: {},
      loading: true,
    };
  },
  mounted() {
  },
  created() {
    list().then((res) => {
      const data = res.data.data;
      console.log(data)
      this.info = data.info;
      let config = {
        unit: "次数", showValue: true, data: data.key
      }
      this.config = config
      this.memoryConfig = {localGradient: true, value: data.memory, textColor: "rgb(180,63,255)"}
      this.loading = false

    });
  },
  computed: {},
};
</script>
<style scoped>


.info_box {
  width: 95%;
  height: 350px;
  background: white;
  margin: 20px auto;
  box-shadow: #e7dede 0px 0px 10px;
  border: 1px solid #e7dede;
  border-radius: 5px;
  padding: 20px;
}

.info_title {
  border-bottom: 1px solid #e7dede;
  padding-bottom: 10px;
}

.detail_box {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.detail_box > div {
  width: calc(100% / 3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #e7dede;
}

.chart_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
}


</style>
